<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>限时秒杀</title>
  <link rel="stylesheet" type="text/css" href="../css/api.css" />
  <link rel="stylesheet" type="text/css" href="../css/aui.css" />
  <link rel="stylesheet" type="text/css" href="../css/common.css" />
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/zepto.min.js"></script>
  <script type="text/javascript" src="../script/common.js"></script>
  <style>
    html,
    body {
      height: 200px;
    }

    .jb .title {
      width: 100%;
      text-align: center;
      padding-top: 30px;
      padding-bottom: 10px;
      background: #fff;
      color: #000000;
      position: relative;
      display: flex;
      text-align: center;
      align-items: center;
      justify-content: center;
    }

    .jb .title>div {
      position: absolute;
      left: 10px;
      font-size: .8rem;
    }

    .jb .limit_title {
      width: 100%;
      text-align: center;
      padding-top: 30px;
      padding-bottom: 20px;
      color: #fff;
    }

    .jb .content {
      text-align: center;
      width: 15rem;
      position: relative;
      left: -7.5rem;
      margin-left: 50%;
      background: #fff;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    .jb .content p {
      padding: .2rem;
      font-size: 12px;
    }

    .jb .content span {
      font-size: 1.8rem;
    }

    .videoPlayer {
      margin-top: 15px;
      text-align: center;
      width: 15rem;
      height: 15rem;
      position: relative;
      left: -7.5rem;
      margin-left: 50%;
      background: #fff;
      border: 1px solid #ccc;
      border-radius: 5px;
      overflow: hidden;
    }

    .videoPlayer::after {
      position: absolute;
      content: ' ';
      width: 0;
      height: 0;
      margin: 50%;
      left: -0.5rem;
      top: -1rem;
      border: 20px solid transparent;
      border-left: 30px solid #ccc;
    }

    .videoPlayer::before {
      position: absolute;
      content: ' ';
      width: 3rem;
      height: 3rem;
      margin: 50%;
      left: -1.5rem;
      top: -1.5rem;
      border: 1px solid #ccc;
      border-radius: 50%;
    }

    #itemImg {
      margin-top: 15px;
      text-align: center;
      width: 15rem;
      height: 15rem;
      position: relative;
      left: -7.5rem;
      margin-left: 50%;
      background: #fff;
      border: 1px solid #ccc;
      border-radius: 5px;
      overflow: hidden;
    }

    #itemImgLong {
      margin-top: 10px;
      width: 100%;
      display: flex;
      text-align: center;
      align-items: center;
      justify-content: center;
    }

    #itemImgLong img {
      width: 90%;
      border: 1px solid #ccc;
      border-radius: 5px;
      overflow: hidden;
    }

    .itemText {
      padding: 0.75rem;
    }

    #footer {
      height: 2.5rem;
      background: linear-gradient(to left, #e46252 25%, #f0392b 75%);
      color: #fff;
      display: flex;
      text-align: center;
      align-items: center;
      justify-content: space-between;
      font-size: 20px;
    }
  </style>
</head>

<body class="jb">
  <h2 class='title'>
    <div onclick="closeWin();">
      <span class="aui-iconfont aui-icon-left"></span>&nbsp;&nbsp;返回
    </div>
    限时抢购
  </h2>
  <h1 class='limit_title'>精选好货限时秒杀</h1>
  <div class="content">
    <p></p>
    <span></span>
    <p></p>
  </div>
  <div style="padding-bottom:70px;">
    <div class='videoPlayer' id="videoPlayer">
    </div>
    <div class='videoPlayer' id="material_info">
    </div>
    <div class='itemText' id='itemdesc'></div>
    <div id='itemImg'></div>
    <div id='itemImgLong'></div>
  </div>
  <footer class="aui-bar aui-bar-tab" id='footer'>
    <div>
      <span style="font-size:12px;margin-left:20px;">¥<span style="font-size:20px;" id='itemendprice'></span></span>
      <span style="font-size:12px;color:#ccc;" id='itemprice'></span>
    </div>
    <div>
      <span style="padding:8px 15px;background:#fff;color:#000000;margin-right:5px;border-radius:5px;font-size:16px;"
        id='share'>商品分享</span>
      <span style="padding:8px 15px;background:#fff;color:#000000;margin-right:10px;border-radius:5px;font-size:16px;" id="buy">领券购买</span>
    </div>
  </footer>
</body>
<script>
  var data,aliBC;
  apiready = function () {
    aliBC = api.require("aliBC");
    data = api.pageParam.data
    console.log(JSON.stringify(data))
    $api.html($api.domAll('.jb .content p')[0], formatDateTime(data.start_time * 1000));
    switch (data.grab_type) {
      case '1':
        $api.html($api.dom('.jb .content span'), '即将开始');
        break;
      case '2':
        $api.html($api.dom('.jb .content span'), '已抢光');
        break;
      default:
        $api.html($api.dom('.jb .content span'), '已开抢');
    }
    $api.html($api.domAll('.jb .content p')[1], data.itemtitle);
    $api.html($api.dom('#itemendprice'), data.itemendprice);
    $api.html($api.dom('#itemprice'), "原价"+data.itemprice+"元");

    $api.html($api.dom('#videoPlayer'), "<img src='"+data.itempic+"_500x500.jpg'/>");
    $api.addEvt($api.dom('#videoPlayer'), 'click', function () {
      api.openVideo({
        //url: 'http://7o50kb.com2.z0.glb.qiniucdn.com/c1.1.mp4'
        //url:`http://cloud.video.taobao.com/play/u/1/p/1/e/6/t/1/${data.material_id}.mp4`
        url: data.material_info.detail_video_url
      });
    });

    $api.html($api.dom('#material_info'), "<img src='"+data.detial_video_cover+"'/>");
    $api.addEvt($api.dom('#material_info'), 'click', function () {
      api.openVideo({
        url: data.material_info.main_video_url
      });
    });

    $api.html($api.dom('#itemdesc'), data.itemdesc);
    $api.html($api.dom('#itemImg'), "<img src='"+data.itempic+"_500x500.jpg'/>");
    $api.html($api.dom('#itemImgLong'), "<img src='http://img.haodanku.com/"+data.itempic_copy+"-600'/>");

    //分享
    $api.addEvt($api.dom('#share'), 'click', function () {
      data.gtitle = data.title;
      data.title = '分享赚';
      data.framename = 'share_frm';
      data.item_id = data.itemid
      data.is_tmall = data.shoptype == 'B' ? '1' : '0'; //0为淘宝1为天猫
      data.tjp = 't' //t是淘宝，j是京东，p是拼多我
      console.log('---------')
      console.log(JSON.stringify(data))

      openPublic(JSON.stringify(data))
    });
    //领券购买
    $api.addEvt($api.dom('#buy'), 'click', function () {
      data.item_id = data.itemid
      buy(JSON.stringify(data))
    });
  }
      //如果是淘宝检测是否授权
    function buy(item){
      var tjp = item.tjp||'t';
      if (tjp=='t') {
        aliBC.getUserInfo(function(ret,err){
            if(ret.status){
                _Ajax(window.APIServer.BindTb,'post',{values:ret},'json',function(ret){
                    if (ret.code==1) {
                        buy2();
                    }else{
                        _toast(ret.msg)
                        aliBC.logout(function(ret,err){});//清除授权
                    }
                })
            }else{
              //登录
              aliBC.showLogin(function(ret,err){
                  if(ret.status){
                      _Ajax(window.APIServer.BindTb,'post',{values:ret},'json',function(ret){
                          if (ret.code==1) {
                              buy2();
                          }else{
                              _toast(ret.msg)
                              aliBC.logout(function(ret,err){});//清除授权
                          }
                      })
                  }else{
                      _toast('授权失败');
                  }
              });
            }
        });
      }else{
        buy2(item);
      }
    }
    //购买
    function buy2(item){
      var tjp = item.tjp||'t';
      api.openFrame({
          name: 'plane',
          url: 'widget://html/plane.html',
          rect: {
              x: 0,
              y: 0,
              w: 'auto',
              h: 'auto'
          },
          pageParam: {tjp:tjp},
          bounces: false,
      });
      _Ajax(window.APIServer.Buy,'post',{values:item},'json',function(ret){
          api.closeFrame({
              name: 'plane'
          });
          //必须后台转链，不然这里是打不开优惠券的，使用showPageByUrl,唤起手淘
          if (ret.code==1) {
             if (tjp=='t') {
                aliBC.showPageByUrl({
                  url:ret.data.return_url,
                  openType:'native',//'auto','h5','native'
                  pid:ret.data.pid,
                  taokeAppkey:ret.data.appkey,
                  adzoneId:ret.data.adzoneid,
                },function(ret,err){
                  //购买商品的回调

                });
              }else{
                var title = "京东";
                if (tjp=='p') {title = "拼多多"}
                openWeb({"title":title,"url":ret.data.return_url});
              }
          }else{
              _toast(ret.msg)
          }
            
      }) 
    }
</script>

</html>
